<template>
    <div class="user">
        <Breadcrumb router />
        <div class="user-body f f-jb pd-20">
            <div class="user-left">
                <div class="left-title f f-ac"><img src="@/assets/fire.png" />导航菜单</div>
                <el-menu :default-active="current" router>
                    <template v-for="(i, k) in navList">
                        <el-menu-item v-if="!i.children" :key="k" :index="i.path">
                            {{ i.title || "-" }}
                        </el-menu-item>
                        <el-submenu v-else :key="k" :index="i.path">
                            <span slot="title"> {{ i.title || "-" }}</span>
                            <el-menu-item v-for="(j, l) in i.children" :key="l" :index="j.path">
                                {{ j.title || "-" }}
                            </el-menu-item>
                        </el-submenu>
                    </template>
                </el-menu>
            </div>
            <div class="user-right">
                <router-view />
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        components: {},
        data() {
            return {
                current: "/user/myActivity", // 当前选中的导航
                navList: [{
                        title: "我的活动",
                        path: "/user/myActivity"
                    },
                    {
                        title: "我的培训",
                        path: "/user/myTrain"
                    },
                    {
                        title: "我的预约",
                        path: "/user/myAppointment"
                    },
                    {
                        title: "我的消息",
                        path: "/user/myMessage"
                    },
                    {
                        title: "我的收藏",
                        path: "/user/myCollect"
                    },
                    {
                        title: "我的协议",
                        path: "/agree",
                        children: [{
                                title: "服务协议",
                                path: "/user/agreementRe"
                            },
                            {
                                title: "隐私协议",
                                path: "/user/agreementCo"
                            },
                        ],
                    },
                    {
                        title: "我的设置",
                        path: "/user",
                        children: [{
                                title: "账户修改",
                                path: "/user/myAccount"
                            },
                            {
                                title: "密码修改",
                                path: "/user/myPassword"
                            },
                        ],
                    },
                ],
            };
        },
        watch: {
            "$route.path"(v) {
                this.current = v;
            },
        },
        mounted() {
            this.current = this.$route.path;
        },
        methods: {
            // 导航切换
            handleNav(item) {
                this.current = item.value;
            },
        },
    };
</script>

<style lang="scss" scoped>
    .user {
        width: 100%;

        &-body {
            width: 1200px;
            min-height: 200px;
            margin: auto;

            .user-left {
                width: 284px;
                height: 100%;
                border-radius: 8px;
                box-shadow: 0 0 10px rgba(217, 217, 217, 0.3);
                overflow: hidden;

                .left-title {
                    color: #333;
                    font-size: 16px;
                    font-weight: 600;
                    padding: 20px;
                    border-bottom: 1px solid #d9d9d980;

                    >img {
                        width: 13px;
                        height: 15px;
                        margin-right: 10px;
                    }
                }
            }

            .user-right {
                width: 892px;
                height: 100%;
            }
        }
    }

    .el-menu-item,
    :deep(.el-submenu .el-submenu__title) {
        color: #909090;
        height: 42px;
        line-height: 42px;
    }

    :deep(.el-menu .is-active) {
        color: #193980;
        background-color: #e5eaf6;
        position: relative;

        &::after {
            content: "";
            display: inline-block;
            position: absolute;
            right: 0;
            top: 0;
            width: 3px;
            height: 42px;
            background-color: #193980;
        }
    }
</style>